<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>漫展接单小程序 - 原型设计</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        .prototype-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(375px, 1fr));
            gap: 20px;
            padding: 20px;
        }
        .prototype-item {
            border: 1px solid #ddd;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
        }
        .prototype-title {
            background-color: #f3f4f6;
            padding: 10px;
            font-weight: bold;
            text-align: center;
            border-bottom: 1px solid #ddd;
        }
        iframe {
            width: 100%;
            height: 667px;
            border: none;
        }
    </style>
</head>
<body class="bg-gray-100">
    <header class="bg-purple-600 text-white p-4 text-center">
        <h1 class="text-2xl font-bold">漫展接单小程序原型设计</h1>
        <p class="mt-2">为漫展摄影师和客户提供便捷的接单平台</p>
    </header>

    <div class="prototype-container">
        <!-- 首页 -->
        <div class="prototype-item">
            <div class="prototype-title">首页</div>
            <iframe src="home.html"></iframe>
        </div>

        <!-- 摄影师详情页 -->
        <div class="prototype-item">
            <div class="prototype-title">摄影师详情页</div>
            <iframe src="photographer.html"></iframe>
        </div>

        <!-- 预约页面 -->
        <div class="prototype-item">
            <div class="prototype-title">预约页面</div>
            <iframe src="booking.html"></iframe>
        </div>

        <!-- 订单页面 -->
        <div class="prototype-item">
            <div class="prototype-title">订单页面</div>
            <iframe src="orders.html"></iframe>
        </div>

        <!-- 个人中心 -->
        <div class="prototype-item">
            <div class="prototype-title">个人中心</div>
            <iframe src="profile.html"></iframe>
        </div>

        <!-- 登录页面 -->
        <div class="prototype-item">
            <div class="prototype-title">登录页面</div>
            <iframe src="login.html"></iframe>
        </div>

        <div class="prototype-item">
            <div class="prototype-title">登录页面1</div>
            <iframe src="pages/login.html"></iframe>
        </div>

        <!-- 用户首页 -->
        <div class="prototype-item">
            <div class="prototype-title">用户首页</div>
            <iframe src="user-home.html"></iframe>
        </div>

        <!-- 地图页面 -->
        <div class="prototype-item">
            <div class="prototype-title">地图页面</div>
            <iframe src="map.html"></iframe>
        </div>

        <!-- 摄影师列表 -->
        <div class="prototype-item">
            <div class="prototype-title">摄影师列表</div>
            <iframe src="photographer_list.html"></iframe>
        </div>

        <!-- 用户-摄影师详情 -->
        <div class="prototype-item">
            <div class="prototype-title">用户-摄影师详情</div>
            <iframe src="user-photographer-detail.html"></iframe>
        </div>

        <!-- 摄影师详情页(另一版本) -->
        <div class="prototype-item">
            <div class="prototype-title">摄影师详情页(另一版本)</div>
            <iframe src="photographer-detail.html"></iframe>
        </div>

        <!-- 注册页面 -->
        <div class="prototype-item">
            <div class="prototype-title">注册页面</div>
            <iframe src="pages/register.html"></iframe>
        </div>

        <!-- 客户首页 -->
        <div class="prototype-item">
            <div class="prototype-title">客户首页</div>
            <iframe src="pages/customer/home.html"></iframe>
        </div>
    </div>
</body>
</html>

## 产品规划

### 用户需求分析

在漫展场景中，存在以下几类用户需求：

1. **摄影师需求**：
   - 展示自己的作品和风格
   - 管理接单状态（空闲/忙碌/休息等）
   - 查看和管理预约订单
   - 展示自己的位置和摊位信息

2. **客户需求**：
   - 浏览附近可用的摄影师
   - 查看摄影师作品和评价
   - 了解摄影师当前状态
   - 预约或直接前往拍摄
   - 支付和评价服务

### 功能规划

基于以上需求，我规划以下核心功能：

1. **用户模块**：
   - 客户注册/登录
   - 摄影师注册/登录
   - 个人信息管理

2. **摄影师模块**：
   - 作品集展示
   - 状态管理（空闲/忙碌/休息）
   - 订单管理
   - 位置信息设置

3. **客户模块**：
   - 摄影师列表浏览
   - 摄影师详情查看
   - 预约/下单
   - 支付功能
   - 评价功能

4. **地图模块**：
   - 展会平面图
   - 摄影师位置标记
   - 导航功能

5. **消息模块**：
   - 订单通知
   - 系统消息
   - 摄影师-客户沟通

### 页面规划

基于功能规划，设计以下页面：

1. **首页**：展示热门摄影师、活动信息
2. **摄影师列表页**：展示所有摄影师及其状态
3. **摄影师详情页**：展示摄影师作品、评价、状态
4. **地图页**：展示展会平面图和摄影师位置
5. **订单页**：客户查看自己的订单
6. **个人中心**：用户信息管理
7. **摄影师工作台**：摄影师管理订单和状态
8. **消息中心**：查看系统和订单消息